<template>
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <el-form ref="queryForm" :inline="true">
        <el-form-item label="计划实施年度">
          <el-input v-model="queryParams.sel_jhssnd" type="number" />
        </el-form-item>
        <el-form-item label="培训任务类">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_pxrwlb">
            <el-option v-for="({ sjxdm, sjxmc }, index) in xlsj2" :key="index" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训任务名称">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_pxrwmc">
            <el-option v-for="({ sjxdm, sjxmc }, index) in xlsj3" :key="index" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData"> 查询 </el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel">
      <el-row class="mbBottom">
        <el-col :span="16">
          <el-button type="primary" @click="doAdd('form1')"> 新增 </el-button>
          <el-button type="primary" @click="doExportExcel"> 导出 </el-button>
        </el-col>
      </el-row>
      <el-table ref="table-main" :data="zbdata" height="calc(100% - 113px)" :loading="bgLoading" border >
        <!-- 状态,培训任务类别,培训任务名称,计划实施年度,计划制定人,计划制定时间,计划期计刺期,计划参加人员,计划培训地点,计划培训类型,培训内容及要求文档
        ,提交审批人,提交审批时间,审批日期,审批意见,备注 -->
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="状态" align="center" prop="lczt" show-overflow-tooltip width="180"  />
        <el-table-column label="培训任务类别" align="center" prop="pxrwlb" show-overflow-tooltip width="180"  />
        <el-table-column label="培训任务名称" align="center" prop="pxrwmc" show-overflow-tooltip width="180"  />
        <el-table-column label="计划实施年度" align="center" prop="jhssnd" show-overflow-tooltip width="180"  />
        <el-table-column label="计划制定人" align="center" prop="tjspr_xm" show-overflow-tooltip width="180"  />
        <el-table-column label="计划制定时间" align="center" prop="jhzdsj" show-overflow-tooltip width="180"  />
        <el-table-column label="计划制定开始时间" align="center" prop="jhpxqsrq" show-overflow-tooltip width="180"  />
        <el-table-column label="计划参加人员" align="center" prop="cjry" show-overflow-tooltip width="180"  />
        <el-table-column label="计划培训地点" align="center" prop="jhpxdd" show-overflow-tooltip width="180"  />
        <el-table-column label="计划培训类型" align="center" prop="jhpxlx" show-overflow-tooltip width="180"  />
        <el-table-column label="培训内容及要求文档" align="center" class-name="small-padding">
          <template slot-scope="scope">
            <span v-if="scope.row.fileid && scope.row.classid && scope.row.filename_zmcl"
              @click.stop="$bgxzfj({ classid: scope.row.classid_zmcl, fileid: scope.row.fileid_zmcl })">
              <el-link href="#" type="primary">{{ scope.row.filename_zmcl }}</el-link>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="提交审批人" align="center" prop="tjspr_xm" show-overflow-tooltip width="180"  />
        <el-table-column label="提交审批时间" align="center" prop="sprq" show-overflow-tooltip width="180"  />
        <el-table-column label="审批日期" align="center" prop="sp_date" show-overflow-tooltip width="180"  />
        <el-table-column label="审批意见" align="center" prop="spyj" show-overflow-tooltip width="180"  />
        <el-table-column label="备注" align="center" prop="bz" show-overflow-tooltip width="180"  />
        <el-table-column label="操作" align="center" class-name="small-padding" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="delbutton" @click="doUpdate(scope.row, scope.$index)"> 修改 </el-button>
            <el-button type="text" class="delbutton" @click="doDelete(scope.row, scope.$index)"> 删除 </el-button>
            <el-button type="text" @click="doView(scope.row, scope.$index)"> 查看 </el-button>
            <el-button type="text" @click="tjspfun(scope.row, scope.$index)">提交审批</el-button>
          </template>
        </el-table-column>
      </el-table>

      <qjfy :total='total' @fun="qjfyfun"></qjfy>
    </page-panel-new>
    <el-dialog :title="dialogTitle" :visible.sync="Open1" class="qjztk" append-to-body>
      <div class="el-dialog-div">
        <el-form ref="form1" :model="formData" :validate-on-rule-change=false label-width="150px"
          :disabled="formDisable">
          <el-form-item label="计划实施年度" prop="jhssnd" :rules="[
            { required: true, message: '请输入', trigger: 'blur' },
          ]">
            <el-input v-model="formData.jhssnd" type="number" />
          </el-form-item>
          <el-form-item label="计划制定人" prop="tjspr_xm" :rules="[
            { required: true, message: '请输入', trigger: 'blur' },
          ]">
            <el-input v-model="formData.tjspr_xm" />
          </el-form-item>
          <el-form-item label="计划制定时间" prop="jhzdsj" :rules="[
            { required: true, message: '请输入', trigger: 'blur' },
          ]">
            <el-date-picker v-model="formData.jhzdsj" type="date" placeholder="选择日期" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item label="培训任务类别">
            <el-select v-model="formData.pxrwlb" prop="pxrwlb" :rules="[
              { required: true, message: '请输入', trigger: 'blur' },
            ]" filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in xlsj2" :key="item.sjxmc" :label="item.sjxmc" :value="item.sjxmc">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培训任务名称" prop="pxrwmc" :rules="[
            { required: true, message: '请输入', trigger: 'blur' },
          ]">
            <el-input v-model="formData.pxrwmc" />
          </el-form-item>
          <el-form-item label="计划制定开始时间" prop="jhpxqsrq" :rules="[
            { required: true, message: '请输入', trigger: 'blur' },
          ]">
            <el-date-picker v-model="formData.jhpxqsrq" type="date" placeholder="选择日期" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item label="计划培训结束时间" prop="jhqjjsrq" :rules="[
            { required: true, message: '请输入', trigger: 'blur' },
          ]">
            <el-date-picker v-model="formData.jhqjjsrq" type="date" placeholder="选择日期" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item label="计划培训地点">
            <el-select v-model="formData.jhpxdd" prop="jhpxdd" :rules="[
              { required: true, message: '请输入', trigger: 'blur' },
            ]" filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in xlsj3" :key="item.sjxmc" :label="item.sjxmc" :value="item.sjxmc">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划培训类型">
            <el-select v-model="formData.jhpxlx" filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in xlsj4" :key="item.sjxmc" :label="item.sjxmc" :value="item.sjxmc">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划参加人员">
            <el-select v-model="formData.cjry" multiple filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in xlsj4" :key="item.sjxmc" :label="item.sjxmc" :value="item.sjxmc">
              </el-option>
            </el-select>
          </el-form-item>
          <qjdgfj v-if="!formDisable" bt="附件" @fun="funhdfj" :jgfj="10" :key="keycz"></qjdgfj>
          <el-form-item label="备注">
            <el-input v-model="formData.bz" type="textarea" :rows="4" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!formDisable" type="primary" @click="doSubmit"> 保存 </el-button>
        <el-button class="cancelBtn" @click="doClose"> 关 闭 </el-button>
      </div>
    </el-dialog>
    <el-dialog title="审批" :visible.sync="Open2"  class="qjxtk" append-to-body>
      <div class="el-dialog-div">
        <el-form ref="form2" :model="formData1" :validate-on-rule-change=false label-width="150px"
          >
          <el-form-item label="审批人">
            <el-select v-model="formData1.tjspr_xm" prop="tjspr_xm" :rules="[
              { required: true, message: '请输入', trigger: 'blur' },
            ]" filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in xlsj2" :key="item.sjxmc" :label="item.sjxmc" :value="item.sjxmc">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="doSubmit1"> 提交 </el-button>
        <el-button class="cancelBtn" @click="doClose1"> 关 闭 </el-button>
      </div>
    </el-dialog>
    <qjckfj ref="ckfj"></qjckfj>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import {
  getListData,
  getSelectorData,
  submit,
  submit_tjsp,
  submit_delete,
  exportExcel
} from '@/api/syfxxtApi/ygxxgl/xgpg/api.js'

import dayjs from 'dayjs'

export default Vue.extend({
  name: 'Ygxxgl-xgpg',
  data() {
    return {
      title: '培训', //页面标题
      dialogTitle: '', // 弹框标题
      bgLoading: false, // 表格加载状态
      Open1: false, //弹框状态
      Open2: false, //弹框状态
      zbdata: [
        {
          "cjry": "白绍状,蔡涛",
          "lczt": "效果评估",
          "pxyq_cnt": "",
          "jhssnd": "2025",
          "ssqsrq": "2025-05-01",
          "xgpgr": "admin",
          "jhpxdd": "单位",
          "pxrwmc": "88888888888888",
          "jhzdr": "admin",
          "tjspr_xm": "管理员",
          "xgpgyj": "",
          "jhpxqsrq": "2025-05-01",
          "tjspsj": "2025-05-05 13:18:01",
          "bz": "888888888888888888",
          "s_zhxgr": "admin",
          "id": "4",
          "spyj": "也一样",
          "jhpxlx": "能力保持",
          "xgpg": "",
          "s_cjr": "admin",
          "qtry": "",
          "jhzdr_xm": "管理员",
          "spr_xm": "管理员",
          "jhcjry": "白绍状,曹洁",
          "xgpgr_xm": "管理员",
          "pxcl_cnt": "",
          "sprq": "2025-05-05",
          "jhzdsj": "2025-05-05",
          "tjspr": "admin",
          "ssjsrq": "2025-05-04",
          "pxrwlb": "测试",
          "s_cjsj": "2025-05-05 13:17:10",
          "spr": "admin",
          "zfyy": "",
          "xgpg_cnt": "",
          "s_zhxgsj": "2025-05-05 13:20:36",
          "pxdd": "555",
          "jhpxjsrq": "2025-05-04"
        }
      ], //主表格数据
      xlsj1: [],//查询选择器 下拉数据
      xlsj2: [],//业务领域 下拉数据
      xlsj3: [],//荣誉等级 下拉数据
      xlsj4: [],//发证机关 下拉数据
      selectorData_in_fbdw: [], //录入选择器 下拉数据
      optype: 'xz', //操作类型
      fjid: '', //附件ID
      keycz: 0, //附件上传key
      fileList: [],
      fileList_fj: [],
      formData: {
        "cjry": "",
        "lczt": "",
        "pxyq_cnt": "",
        "jhssnd": "",
        "ssqsrq": "",
        "xgpgr": "",
        "jhpxdd": "",
        "pxrwmc": "",
        "jhzdr": "",
        "tjspr_xm": "",
        "xgpgyj": "",
        "jhpxqsrq": "",
        "tjspsj": "",
        "bz": "",
        "s_zhxgr": "",
        "id": "",
        "spyj": "",
        "jhpxlx": "",
        "xgpg": "",
        "s_cjr": "",
        "qtry": "",
        "jhzdr_xm": "",
        "spr_xm": "",
        "jhcjry": "",
        "xgpgr_xm": "",
        "pxcl_cnt": "",
        "sprq": "",
        "jhzdsj": "",
        "tjspr": "",
        "ssjsrq": "",
        "pxrwlb": "",
        "s_cjsj": "",
        "spr": "",
        "zfyy": "",
        "xgpg_cnt": "",
        "s_zhxgsj": "",
        "pxdd": "",
        "jhpxjsrq": ""
      }, //录入Form数据
      formData1: {
        "tjspr_xm": "",
        "tjspsj": "",
        "spyj": "",
        "spr_xm": "",
        "sprq": "",
        "tjspr": "",
        "spr": "",
      }, //录入Form数据
      formDisable: false, //表单禁用状态
      queryParams: {
        sel_jhssnd: '',
        sel_pxrwlb: '',
        sel_pxrwmc: '',
        start: 1,
        limit: 20,
      }, //查询参数
      total: '', // 总条数

    }
  },
  computed: {
  },
  watch: {
    optype: {
      handler(newVal, oldVal) {
        if (newVal == 'ck') {
          this.formDisable = true;
        } else {
          this.formDisable = false;
        }
      },
      deep: true,
    },
    queryParams: {
      handler(newVal, oldVal) {
        this.getxlsj1();
      },
      deep: true,
    },
  },
  mounted() {
    this.getListData();
    // this.getxlsj1();
  },
  methods: {
    fundgfj(e) {//单个附件上传事件
      this.fileList = e;
    },
    funhdfj(e) {//多个附件上传事件
      this.fileList_fj = e;
    },
    //获取 选择器数据
    getxlsj1() {
      try {
        const param = {

        };
        getSelectorData("pxrwlb", param).then((res) => {
          if (res.success) {
            this.xlsj2 = res.rows;
          } else {
            this.xlsj2 = [];
          }
        })
        getSelectorData("pxrwmc", param).then((res) => {
          if (res.success) {
            this.xlsj3 = res.rows;
          } else {
            this.xlsj3 = [];
          }
        })
        getSelectorData("jhcjry", param).then((res) => {
          if (res.success) {
            this.xlsj4 = res.rows;
          } else {
            this.xlsj4 = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    //获取主表格查询数据
    getListData() {
      try {
        this.bgLoading = true
        getListData(this.queryParams).then((res) => {
          if (res.success) {
            this.zbdata = res.rows;
            this.total = res.total;
          } else {
            this.zbdata = []
            this.$message.error({ content: '请重新搜索!', placement: 'center' })
          }
        })
      } catch (error) {
        this.bgLoading = false;
        console.warn('接口提示', error);
      }
    },


    //处理保存按钮事件
    doSubmit() {
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          var _data = { ...this.formData };
          var _submitData = new FormData();
          for (let key in _data) {
            if (_data[key] && _data[key] instanceof Date) {
              _data[key] = dayjs(_data[key]).format('YYYY-MM-DD');
            }
            _submitData.append(key, _data[key]);
          }
          var _fileList_fj = [];
          var _fileList = [];
          this.fileList_fj.forEach(file => {
            if (file.status == 'ready' && file.minioID) {
              _fileList_fj.push(file);
            }
          });
          this.fileList.forEach(file => {
            if (file.status == 'ready' && file.minioID) {
              _fileList.push(file);
            }
          });
          _submitData.append("fileList_fj", JSON.stringify(_fileList_fj));

          submit(_submitData)
            .then((res) => {
              if (res.success) {
                this.$message.success({ content: '保存成功!', placement: 'center' })
                this.Open1 = false;
                this.getListData()
              } else {
                this.$message.error({ content: '保存失败!', placement: 'center' })
              }
            })
            .catch(() => {
              this.$message.error({ content: '保存失败!', placement: 'center' })
            });
        }
      });
    },
    doSubmit1() {
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          var _data = { ...this.formData1 };
          var _submitData = new FormData();
          for (let key in _data) {
            if (_data[key] && _data[key] instanceof Date) {
              _data[key] = dayjs(_data[key]).format('YYYY-MM-DD');
            }
            _submitData.append(key, _data[key]);
          }
          submit_tjsp(_submitData)
            .then((res) => {
              if (res.success) {
                this.$message.success({ content: '保存成功!', placement: 'center' })
                this.Open2 = false;
                this.getListData()
              } else {
                this.$message.error({ content: '保存失败!', placement: 'center' })
              }
            })
            .catch(() => {
              this.$message.error({ content: '保存失败!', placement: 'center' })
            });
        }
      });
    },
    //查询参数重置按钮事件
    resetQuery() {
      this.queryParams = {
        sel_jhssnd: '',
        sel_pxrwlb: '',
        sel_pxrwmc: '',
        start: 1,
        limit: 20,
      };
      this.getListData()
    },
    czcxfun() {
      this.keycz++
      this.formData = {
        "cjry": "",
        "lczt": "",
        "pxyq_cnt": "",
        "jhssnd": "",
        "ssqsrq": "",
        "xgpgr": "",
        "jhpxdd": "",
        "pxrwmc": "",
        "jhzdr": "",
        "tjspr_xm": "",
        "xgpgyj": "",
        "jhpxqsrq": "",
        "tjspsj": "",
        "bz": "",
        "s_zhxgr": "",
        "id": "",
        "spyj": "",
        "jhpxlx": "",
        "xgpg": "",
        "s_cjr": "",
        "qtry": "",
        "jhzdr_xm": "",
        "spr_xm": "",
        "jhcjry": "",
        "xgpgr_xm": "",
        "pxcl_cnt": "",
        "sprq": "",
        "jhzdsj": "",
        "tjspr": "",
        "ssjsrq": "",
        "pxrwlb": "",
        "s_cjsj": "",
        "spr": "",
        "zfyy": "",
        "xgpg_cnt": "",
        "s_zhxgsj": "",
        "pxdd": "",
        "jhpxjsrq": ""
      }
    },

    //处理新增按钮事件
    doAdd(formName) {
      this.Open1 = true;
      this.optype = 'xz';
      this.czcxfun();
      this.formData.optype = 'add';
      this.dialogTitle = this.title + ' >> 新增';
    },
   
    //处理修改按钮事件
    doUpdate(row) {
      this.xzsj = row;
      this.Open1 = true;
      this.optype = 'xg';
      this.dialogTitle = this.title + ' >> 修改';
      this.formData = { ...row };
      this.formData.optype = 'update';
    },
    //处审批
    tjspfun(row) {
      this.Open2 = true;
      this.formData1 = { ...row };
    },

    //处理删除按钮事件
    doDelete(row, rowindex) {
      return this.$modal.confirm("是否确认删除该条数据？")
        .then(() => {
          submit_delete({ id: row.id })
            .then((res) => {
              if (res.success) {
                this.getListData()
                this.$message.success({ content: '删除成功!', placement: 'center' })
              } else {
                this.$message.error({ content: '删除失败!', placement: 'center' })
              }
            })
            .catch(() => {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            });
        })
        .catch(() => {
        });
    },
    //处理查看按钮事件
    doView(row, rowindex) {
      this.Open1 = true;
      this.optype = 'ck';
      this.dialogTitle = this.title + ' >> 查看';
      this.formData = { ...row };
    },
    //处理查看附件按钮事件
    doViewFJ(row, rowindex) {
      this.$refs.ckfj.dkfj(row.id);
    },
    //处理关闭事件
    //处理关闭事件
    doClose() {
      this.Open1 = false;
    },
    qjfyfun(e) {//分页
      this.queryParams.start = e.start;
      this.queryParams.limit = e.limit;
    },
    //处理关闭事件
    doClose1() {
      this.Open2 = false;
    },
    //处理导出按钮事件
    doExportExcel() {
      var params = { ...this.queryParams };
      for (let key in params) {
        if (/^sel_/.test(key)) {
          var new_key = key.replace(/^sel_/, 'p_');
          params[new_key] = params[key];
        }
      }
      try {
        if (!this.queryParams) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        exportExcel(this.download, params, filename);
      } catch (error) {
      }
    },

  },
})
</script>
<style lang="less" scoped>
.app-container {
  height: 100%;

  .el-table {
    overflow: scroll;
  }
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

/deep/ .is-left>div {
  text-align: left;
}

/deep/ .is-right>div {
  text-align: right;
}

/deep/ .is-left>div {
  text-align: left;
}

/deep/ .is-center>div {
  text-align: center;
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-radio.is-disabled .el-radio__inner,
::v-deep .el-radio.is-disabled .el-radio__label,
::v-deep .el-checkbox.is-disabled .el-checkbox__inner,
::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  background-color: #f6f6f6 !important;
  /* 示例：改变背景颜色 */
  color: #333 !important;
  /* 示例：改变文字颜色 */
}

::v-deep .el-upload.el-upload--text {
  margin: 0 !important;
}

.mainSearchPanel .page-header-title {
  font-size: 16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin: 0;
  padding: 0;
  margin: 10px 0;
}

.mainSearchPanel .el-divider--horizontal {
  margin: 0 !important;
  margin-top: 10px;
}
</style>
